<script lang="ts" setup>
// #region 引入包, 函数和组件
import type { PlaylistItem, radarItem } from "@/services/type"
import { useMusicStore } from "@/store";
import { ref } from "vue"
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore()
// #endregion

// #region // 变量
const props = defineProps<{
  list: radarItem[]
  title: string
}>()
// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <view class="playlist">
    <uni-section class="title" :title="title" type="line"></uni-section>
    <scroll-view class="list" scroll-x :show-scrollbar="false">
      <swiper class="swiper_wrap" next-margin="80rpx">
        <swiper-item
          v-for="(item, index) in list"
          :key="index + Math.random() + ''"
          class="item"
        >
          <view
            v-for="song in item.resources"
            :key="song.resourceId"
            class="song"
            @click="music.onClickPlaySong(song.resourceExtInfo?.song)"
          >
            <image class="song_img" :src="song.uiElement.image.imageUrl"></image>
            <view class="des">
              <view class="name">{{ song.uiElement.mainTitle.title }}</view>
              <view class="artists" v-if="song.resourceExtInfo">
                <block v-for="(ar, ind) in song.resourceExtInfo.artists">
                  <text>{{ ar.name }}</text>
                  <text v-if="ind !== song.resourceExtInfo.artists.length - 1">/</text>
                </block>
              </view>
            </view>
            <image class="song_bofang" src="/src/static/index/bofang.png"></image>
          </view>
        </swiper-item>
      </swiper>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.playlist {
  margin: 20rpx 0;
}
.title {
  :deep(.line) {
    background-color: #c84341;
  }
}
.swiper_wrap {
  height: 402rpx;
}
.item {
  width: 100%;
  .song {
    display: flex;
    align-items: center;
    height: 134rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    font-size: $uni-font-size-lg;
  }
  .des {
    flex: 1;
    max-width: 400rpx;
    view {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .song_img {
    min-width: 86rpx;
    min-height: 88rpx;
    max-width: 86rpx;
    max-height: 88rpx;
    border-radius: $uni-border-radius-sm;
    margin-right: 20rpx;
    border: 2rpx solid $uni-border-color;
  }
  .artists {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-placeholder;
    line-height: 40rpx;
  }
  .song_bofang {
    width: 30rpx;
    height: 30rpx;
    margin-left: auto;
  }
}
</style>
